<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Registry Page</title>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="component/pear/css/pear.css" />
    <link rel="stylesheet" href="admin/css/other/login.css" />
    <style>
        .hiddenhint{
            display:none;
            color:red;
        }
    </style>
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="admin/images/logo.png" />
        <div class="title">SCU BaseLine</div>
        <div class="desc">
            四 川 大 学 基 线 检 测 平 台
        </div>
    </div>
    <div class="layui-form-item">
        <input placeholder="账 户 " lay-verify="required" hover class="layui-input"  id = "registry_username"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="密 码 " lay-verify="required" hover class="layui-input"  oninput="OnInput1 ()" type="password" id ="registry_password"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="再 次 输 入 密 码 " lay-verify="required" oninput="OnInput2 ()" hover class="layui-input"  type="password" id ="registry_password_check"/>
    </div>
    <span class = "hiddenhint" id = "password_check" >（前 后 密 码 不 一 致） </span>
    <div class="layui-form-item">
        <input placeholder="手 机 号 码 " lay-verify="required" hover class="layui-input"  id ="registry_phonenum"/>
    </div>
    <div class="layui-form-item">
        <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login" id = "registry_submit">
            立 即 注 册
        </button>
    </div>
</form>
<!-- 资 源 引 入 -->
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
<script src="component/jquery/jquery-3.6.0.js" charset="utf-8"></script>
<script>
    function OnInput1 () {
        OnInput2()
    }

    function OnInput2 () {
        let registry_password = $("#registry_password").val();
        let registry_password_check = $("#registry_password_check").val();
        var hint = document.getElementById('password_check');
        if(registry_password === registry_password_check)
            hint.style.display  = 'none'
        else
            hint.style.display  = 'block'
    }

    $("#registry_submit").click(function (){
        let registry_username = $("#registry_username").val();
        let registry_password = $("#registry_password").val();
        let registry_password_check = $("#registry_password_check").val();
        let registry_phonenum = $("#registry_phonenum").val();
        if(registry_username == '' || registry_password=='' || registry_phonenum=='' || registry_password_check==''){}
        else if(registry_password != registry_password_check) {}
        else {
            $.ajax({
                url:"/user/register",           // 请求路径
                type:"post",                  // 请求的方式，不区分大小写
                cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify({
                    "username":registry_username,
                    "password":registry_password,
                    "userphone":registry_phonenum,
                }),
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                success:function(response){
                    // console.log("返回: " + response);
                    if(response.code === 200) {
                        alert("注册成功，返回登录界面！");
                        window.location.href = "/login.html";
                    }
                },
                error:function(response){
                    console.log("出错返回");
                }
            });
        }
    });

</script>
</body>
</html>